<template>
	<view class="head">
		<map :data-name='markers' :longitude="longitude" :latitude="latitude" @markertap="go" @tap="total"
			show-compass="true" show-scale="true" show-location="true" :markers="markers" :polyline="polyline"
			:style="'width:'+ width+'px;height:'+height+'px;'">
			<view class="back" v-if="sense == 1">
				<cover-view class="title">
					<cover-view class="top">
						<u-image @click="total" class="topImage" name="arrow-up"></u-image>
					</cover-view>
					<cover-view class="dw">
						<cover-view class="weizhi">
							<cover-image class="imgs" src="../../../static/image/dh.png"></cover-image>
							<cover-view class="dimin">当前位置：</cover-view>
							<cover-view class="xianshi">贵州民族大学花溪校区</cover-view>
						</cover-view>
						
					</cover-view>
					<cover-view class="xinxi">
						<cover-view class="nei">
							<cover-image class="tupian"
								src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1659012856,346800732&fm=26&gp=0.jpg">
							</cover-image>
						</cover-view>
						<cover-view class="body">
							<cover-view class="name">{{name}}</cover-view>
							<cover-view class="name1">数据科学与信息工程学院</cover-view>
							<cover-view class="name1">17软工5班</cover-view>
							<cover-view class="name1">2017级</cover-view>
							<cover-view class="name1">在校学生</cover-view>
							<cover-view class="add" @click="addFriend" :data-name="marker">添加好友</cover-view>
						</cover-view>
					</cover-view>
				</cover-view>
			</view>
		</map>
	</view>
</template>

<script>
	export default {
		name: "club_map",
		data() {
			return {
				width: '', //屏幕宽度
				height: '', //屏幕高度
				ployline: [], //路线渲染
				latitude: '', //当前坐标纬度
				longitude: '', //当前坐标经度
				now_Location: { //当前坐标
					latitude: '',
					longitude: '',
				},
				end_Location: { //目的地坐标
					latitude: '',
					longitude: '',
				},
				now_Duration: {}, //剩余时间
				now_Distance: {}, //剩余距离
				sense: 0, //弹出框
				marker: {}, //当前导航信息
				name: '', //当前地址
				//标记点
				markers: [{
					iconPath: "../../../static/images/dw.png",
					id: 0,
					latitude: "26.46203",
					longitude: "106.67001",
					width: 40,
					height: 40,
					callout: {
						content: "伍辉",
						borderWidth: "2rpx",
						fontSize: "35rpx",
						display: "BYCLICK"
					}
				}, {
					iconPath: "../../../static/images/dw.png",
					id: 1,
					latitude: 26.461422,
					longitude: 106.672851,
					width: 40,
					height: 40,
					callout: {
						content: "吴沁敏",
						borderWidth: "2rpx",
						display: "BYCLICK"
					}
				}]
			}
		},
		onLoad: function(options) {
			console.log("options:", options);
			var that = this;
			// 获取屏幕宽高
			that.width = wx.getSystemInfoSync().windowWidth;
			that.height = wx.getSystemInfoSync().windowHeight;
			uni.getLocation({
				type: 'gcj02', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
				success: function(res) {
					console.log('当前位置数据Object如下：')
					console.log(res)
					/** 开始同步数据 */
					that.latitude = res.latitude
					that.longitude = res.longitude
				}
			})
		},
		methods: {
			/**
			 * 点击对应的标记点触发
			 * @param {*} e 
			 */
			go(e) {
				var that = this
				console.log(e.detail.markerId)
				var val = e.detail.markerId
				console.log(val)
				if (val != null) {
					console.log("我执行了")
					that.sense = 1; //显示隐藏标签
					that.marker = that.markers[val];
					that.name = that.markers[val].callout.content;
				}
				console.log("maker：", that.marker)
			},
			/**
			 * 点击地图触发
			 */
			total() {
				var that = this;
				that.sense = 0;
			},
			/**
			 * 添加好友
			 */
			addFriend(e) {
				console.log(e.currentTarget.dataset.name.callout.content);
				var name = e.currentTarget.dataset.name.callout.content
				uni.showModal({
					content: '确定添加该好友吗？',
					success(res) {
						if (res.confirm) {
							console.log('用户点击确定')
							uni.showToast({
								title: '添加成功',
								type: 'success',
								duration: 2000
							})
						} else if (res.cancel) {
							console.log('用户点击取消')
						}
					},
					fail(res) {
						console.log("失败了！")
					}
				})
			}
		}
	}
</script>

<style>
	.back {
		width: 100%;
		height: 100%;
		background-color: rgb(0, 0, 0, .5);
	}

	.title {
		display: column;
		width: 96%;
		height: 550rpx;
		background-color: white;
		position: fixed;
		bottom: 0;
		margin-left: 2%;
		margin-right: 2%;
		border-radius: 10rpx 10rpx 0 0;
	}

	.top {
		width: 100%;
		height: 50rpx;
		line-height: 60rpx;
		/** 垂直居中 **/
		text-align: center;
		/** 水平居中 **/
	}

	.topImage {
		margin-left: 47%;
		width: 10%;
		height: 50rpx;
	}

	.dw {
		display: flex;
		width: 100%;
		height: 100rpx;
		margin-top: 20rpx;
	}

	.weizhi {
		display: flex;
		width: 100%;
		height: 100rpx;
	}

	.imgs {
		width: 10%;
		height: 70rpx;
		/* margin-top: 20rpx; */
		margin-left: 30rpx;
	}

	.dimin {
		width: 23%;
		margin-top: 10rpx;
		margin-left: 5rpx;
		color: #636363;
	}

	.xianshi {
		display: inline;
		white-space: pre-line;
		width: 60%;
		color: #000;
		font-size: 35rpx;
		height: 100rpx;
		padding-top: 5rpx;
		margin-left: 20rpx;
		margin-top: 5rpx;
		margin-right: 5rpx;
	}

	.xinxi {
		display: flex;
	}

	.nei {
		display: row;
		width: 45%;
		height: 400rpx;
	}

	.tupian {
		width: 95%;
		height: 350rpx;
		margin-left: 30rpx;
	}

	.name {
		margin-left: 40rpx;
		/* margin-top: 30rpx; */
		height: 45rpx;
		width: 76%;
		font-size: 40rpx;
		color: #255BBA;
	}

	.name1 {
		margin-left: 40rpx;
		margin-top: 20rpx;
		font-size: 30rpx;
		color: #636363;
	}

	.add {
		margin-top: 10rpx;
		border-radius: 10rpx;
		float: right;
		width: 50%;
		height: 60rpx;
		text-align: center;
		color: #fff;
		line-height: 60rpx;
		/** 垂直居中 **/
		text-align: center;
		/** 水平居中 **/
		background-color: #255BBA;
	}

	.img {
		margin-top: 30rpx;
		margin-left: 5rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.body {
		display: row;
		margin-top: 15rpx;
		height: 400rpx;
		color: #636363;
	}

	.juli {
		width: 70%;
		margin-top: 40rpx;
		margin-left: 70rpx;
	}

	.item {
		padding-left: 10rpx;
		margin-top: 20rpx;
		border-radius: 10rpx;
		width: 150rpx;
		height: 60rpx;
		color: #255BBA;
	}
</style>
